<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doQuerySelector(){

            // 根据css选择器来查询，返回匹配的第一个节点,返回的是单个对象
            var div=document.querySelector("div");//DOM对象
            // var div=document.querySelector(".mydiv");//DOM对象
            // var div=document.querySelector("#aa");//DOM对象
            // var div=document.querySelector("div[name='heihei']");
            console.log(div);
        }

        function doQuerySelectorAll(){
            // 根据css选择器来查询，返回所有匹配的节点集合
            // var div=document.querySelectorAll("div");//集合
            // var div=document.querySelectorAll(".mydiv");//集合
            // var div=document.querySelectorAll("#aa");//集合
            // var div=document.querySelectorAll("#aa,.mydiv");//集合
            var div=document.querySelectorAll(".mydiv>span");//集合
            console.log(div);
            console.log(div[0]);
        }
    </script>
</head>
<body>
    <input type="button" value="querySelector" onclick="doQuerySelector()">
    <input type="button" value="querySelectorAll" onclick="doQuerySelectorAll()">
    <div>div01</div>
    <div class="mydiv">div02
        <span>01</span>
    </div>
    <div class="mydiv">div03</div>
    <div id="aa">div04</div>
    <div name="heihei">div05</div>
</body>
</html>